<script setup lang="ts">
import { reactive } from "vue";
import { loginHooks, IUserManage } from "./../hooks/loginHooks";
import { Avatar } from "@element-plus/icons-vue"; //icon图标
const _loginHooks: IUserManage = loginHooks();
const form = reactive({
  username: "",
  password: "",
 
});
const token = sessionStorage.removeItem("token");
const rules = {
  user: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
};
const userLogin = (): void => {
  _loginHooks.User_Login(form.username, form.password);
};
</script>


<template>
  <div class="login" clearfix>
    <img
      src="./../assets/47f272d305444ada99f7f221558d00c7.jpeg"
      alt=""
      class="wave"
    />
    <div class="container">
      <div class="img">
        <!-- <img src="./../assets/124904870.jpg" alt=""> -->
      </div>
      <div class="login-box">
        <table action="">
          <img src="./../assets/logo.png" alt="" class="avatar" />
          <h2>Welcome</h2>
          <div class="input-group">
            <el-form
              label-width="67px"
              :rules="rules"
              :model="form"
              class="demo-dynamic"
            >
              <el-form-item prop="username" required label="用户名">
                <el-input
                  placeholder="请输入用户名"
                  v-model="form.username"
                  class="enterpriseName"
                >
                  <el-icon><Avatar /></el-icon>
                </el-input>
              </el-form-item>
              <el-form-item prop="password" required label="密码">
                <el-input
                  placeholder="请输入密码"
                  v-model="form.password"
                  class="enterpriseName"
                  type="password"
                  show-password
                >
                  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                </el-input>
              </el-form-item>
              <!-- <el-form-item label="身份">
                <el-radio-group v-model="form.role">
                  <el-radio label="admin">管理员</el-radio>
                  <el-radio label="teacher">教练员</el-radio>
                </el-radio-group>
              </el-form-item> -->
            </el-form>
          </div>
          <button class="btn" @click="userLogin">登录</button>
        </table>
      </div>
    </div>
  </div>
</template>



<style type="text/css" scoped>
* {
  margin: 0;
  padding: 0;
}
::v-deep .enterpriseName .el-input__inner {
  border: 0;
  border-bottom: 2px solid #d9d9d9;
}

body {
  font-family: "Roboto", sans-serif;
}
>>> .el-form-item__label {
  color: #fff;
}
label {
  color: #fff;
}
h2 {
  color: #fff;
}
.wave {
  position: absolute;
  height: 1100px;
  width: 2000px;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.login-box {
  width: 500px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* border: 1px solid red; */
  transform: translateY(-50%);
  position: relative;
  top:50%;
  background-color: #00000050;
}
form {
  width: 360px;
}

.avatar {
  width: 100px;
}

form h2 {
  font-size: 2.9rem;
  text-transform: uppercase;
  margin: 15px 0;
  color: #fff;
}

.input-group {
  position: relative;
  display: grid;
  grid-template-columns: 7% 93%;
  margin: 25px 0;
  padding: 5px 0;
}

.btn {
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  margin: 1rem 2rem;
  font-size: 1.2rem;
  outline: none;
  border: none;
  background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  background-size: 200%;
  transition: 0.5s;
}

.btn:hover {
  background-position: right;
}
.enterpriseName {
  height: 40px;
}
>>> .el-input__inner {
  height: 40px;
}
</style>